// 登陆组件

import React from "react";
import "./Login.css";

import { withRouter } from 'react-router-dom';

// 导入semantic-ui 组件
import { Icon, Form, Divider } from 'semantic-ui-react';

class Login extends React.Component {
    render(){
        return (
            <div className='login-container'>
                {/* 顶部的Logo */}
                <div className="login-logo">
                    <Icon size='huge' name='home' />
                </div>

                {/* 表单 */}
                <div className='login-form'>
                    <Form>   
                        <Form.Input required icon='user' iconPosition='left' name="username" placeholder='请输入用户名' />
                        <Form.Input required icon='lock' iconPosition='left' name="password" placeholder='请输入密码' />              
                        
                        <Form.Button primary fluid>登陆</Form.Button>
                    </Form>
                </div>

                {/* 分隔线 */}
                <Divider horizontal>其他登陆方式</Divider>

                {/* 第三方登陆 */} 
                <div className='login-third'>
                    <Icon size='large' color='red' name='wechat' />
                    <Icon size='large' color='red' name='qq' />
                </div>
            </div>
        )
    }
}

export default withRouter(Login);
